<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="7">
          <el-steps :active="active" space="500px" finish-status="success">
            <el-step title="商品基本信息"></el-step>
            <el-step title="添加库存信息"></el-step>
            <el-step title="添加移动端详情"></el-step>
          </el-steps>
        </el-col>
      </el-row>
    </el-card>
    <!-- 第一页数据 -->
    <el-card
      v-if="active == 1"
      class="margin-top"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <el-form ref="form" :model="formList" label-width="120px">
        <h3 class="title-text">基本信息</h3>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称">
              <el-input v-model="formList.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品编码">
              <el-input v-model="formList.productSn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品分类">
              <el-select
                v-model="formList.productCategoryName"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in selectClassifyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品品牌">
              <el-select v-model="formList.brandName" placeholder="请选择">
                <el-option
                  v-for="item in selectBrandList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品描述">
              <el-input
                type="textarea"
                v-model="formList.description"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <h3 class="title-text">商品属性</h3>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品原价">
              <el-input-number
                v-model="formList.originalPrice"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="促销类型">
              <el-select
                v-model="formList.promotionType"
                disabled
                placeholder=""
              >
                <el-option
                  v-for="item in promotion"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="活动价格">
              <el-input-number
                disabled
                v-model="formList.price"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="重量(kg)">
              <el-input-number v-model="formList.weight"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="审核状态">
              <el-switch
                v-model="formList.verifyStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否上架">
              <el-switch
                v-model="formList.publishStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缩略图">
              <el-upload
                class="avatar-uploader"
                action="/lejuAdmin/material/uploadFileOss"
                ref="bigPic"
                :on-success="upPicSuccess"
                :headers="{ token: fileToken }"
              >
                <img class="img" v-if="formList.pic" :src="formList.pic" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="推荐状态">
              <el-switch
                v-model="formList.recommendStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新品状态">
              <el-switch
                v-model="formList.newStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预告商品">
              <el-switch
                v-model="formList.previewStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="搜索关键词">
              <el-input
                v-model="formList.keywords"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存预警">
              <el-input-number v-model="formList.lowStock"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品排序">
              <el-input v-model="formList.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="产品服务">
              <el-checkbox-group v-model="arr">
                <el-checkbox label="1">无忧退货</el-checkbox>
                <el-checkbox label="2">快速退款</el-checkbox>
                <el-checkbox label="3">免费包邮</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="10">
            <el-button type="primary" size="default" @click="nextStepMes"
              >填写下一步信息</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 第二页数据 -->
    <el-card
      v-if="active == 2"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <el-form ref="form" :model="formList" label-width="120px">
        <h3 class="title-text">商品sku信息</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标题">
              <el-input v-model="formList.detailTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="副标题">
              <el-input v-model="formList.subTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="画册图片">
              <el-upload
                class="avatar-uploader"
                action="/lejuAdmin/material/uploadFileOss"
                ref="albumPics"
                :on-success="upAlbumPicSuccess"
                :headers="{ token: fileToken }"
              >
                <img
                  class="img"
                  v-if="formList.albumPics"
                  :src="formList.albumPics"
                />
                <i
                  v-else
                  style="height: 100px"
                  class="el-icon-plus avatar-uploader-icon"
                ></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 设置sku颜色和大小 -->
        <el-row :gutter="20" style="margin-bottom: 30px">
          <el-col :span="2">
            <div style="width: 110px; text-align: right; font-size: 16px">
              sku设置
            </div>
          </el-col>
          <!-- 展示输入的sku颜色和大小 -->
          <el-col :span="14">
            <div class="color" v-if="color.length">
              颜色:
              <el-checkbox-group v-model="colorCheckList">
                <el-checkbox
                  :label="index"
                  v-for="(item, index) in color"
                  :key="index"
                >
                  {{ item.value }}
                  <span
                    style="margin-left: 5px; color: #f00"
                    @click="delColorItem(index)"
                    >删除</span
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="sizi" style="margin: 10px 0" v-if="sizi.length">
              大小:
              <el-checkbox-group v-model="siziCheckList">
                <el-checkbox
                  :label="index"
                  v-for="(item, index) in sizi"
                  :key="index"
                >
                  {{ item.value }}
                  <span
                    style="margin-left: 5px; color: #f00"
                    @click="delSiziItem(index)"
                    >删除</span
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-col>
          <!-- 输入sku颜色和大小 -->
          <el-col :span="18" :offset="color.length || sizi.length ? 2 : 0">
            <el-input
              placeholder="颜色描述"
              style="width: 200px"
              v-model="colorItem"
            ></el-input>
            <el-button
              style="margin: 0 20px"
              @click="addColor"
              type="primary"
              size="mini"
              >创建颜色选项</el-button
            >
            <el-input
              placeholder="大小描述"
              style="width: 200px"
              v-model="siziItem"
            ></el-input>
            <el-button
              style="margin: 0 100px 0 20px"
              @click="addSizi"
              type="primary"
              size="mini"
              >创建大小选项</el-button
            >
            <el-button type="primary" size="default" @click="newSkuList"
              >生成sku列表</el-button
            >
            <el-button type="primary" size="default" @click="addSkuList"
              >新增sku</el-button
            >
          </el-col>
        </el-row>
        <!-- sku列表展示 -->
        <el-row :gutter="20">
          <el-col :span="20" :offset="2">
            <el-table :data="skuList" border style="width: 100%">
              <el-table-column type="index" label="#" align="center">
              </el-table-column>
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <el-upload
                    class="avatar-uploader"
                    action="/lejuAdmin/material/uploadFileOss"
                    ref="tableListImg"
                    :on-success="tableListImg"
                    :headers="{ token: fileToken }"
                  >
                    <img
                      @click="pic(scope.$index)"
                      class="img"
                      v-if="scope.row.pic"
                      :src="scope.row.pic"
                    />
                    <i
                      @click="pic(scope.$index)"
                      v-else
                      style="height: 100px"
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                  </el-upload>
                </template>
              </el-table-column>

              <el-table-column label="颜色" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.spData[0].value"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="大小" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.spData[1].value"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="库存" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.stock"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="预警库存" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.lowStock"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="预警库存" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.lockStock"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="sku编码" align="center">
                <template slot-scope="scope">
                  <el-input
                    style="font-size: 12px"
                    placeholder="自定义sku编码"
                    v-model="scope.row.skuCode"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column label="价格" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"></el-input>
                </template>
              </el-table-column>

              <el-table-column label="销量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.sale"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="danger" @click="delTableSku(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12" :offset="8">
          <el-button type="success" size="default" @click="backBefore"
            >返回上一页</el-button
          >
          <el-button type="primary" size="default" @click="nextStepDetail"
            >下一页,填写移动端详情</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-card
      v-if="active == 3"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <h3>详情描述</h3>
      <div class="detail">
        <span>商品详情</span>
        <Tinymce v-model="formList.detailMobileHtml"></Tinymce>
      </div>
      <div class="detail">
        <span>备注</span>
        <el-input type="textarea" v-model="formList.note"></el-input>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" :offset="10">
          <el-button type="success" size="default" @click="backBefore"
            >返回上一页</el-button
          >
          <el-button type="primary" size="default" @click="doCommit"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import {
  productSkusDetail,
  findAllBrand,
  addProductAndSkus,
  updateProductAndSkus,
} from "@/api/product/productList/editProduct/editProduct.js";
import { getToken } from "@/utils/auth.js";
import Tinymce from "@/components/Tinymce";
import buttomBanner from "@/components/buttomBanner";
export default {
  name: "ProductEditProduct",
  data() {
    return {
      index: "",
      colorCheckList: [],
      siziCheckList: [],
      color: [],
      sizi: [],
      colorItem: "",
      siziItem: "",
      arr: [],
      formList: {
        promotionType: 0,
        originalPrice: 0,
        price: 0,
        weight: 0,
        sort: 0,
        lowStock: 0,
      },
      skuList: [],
      id: "",
      list: [],
      active: 1,
      selectClassifyList: [
        {
          value: "创意",
          label: "创意",
        },
        {
          value: "风格",
          label: "风格",
        },
        {
          value: "饰品",
          label: "饰品",
        },
        {
          value: "灯具",
          label: "灯具",
        },
      ],
      selectBrandList: [],
      promotion: [
        {
          value: 0,
          label: "原价",
        },
        {
          value: 1,
          label: "促销价",
        },
        {
          value: 2,
          label: "会员价",
        },
        {
          value: 3,
          label: "阶梯价格",
        },
        {
          value: 4,
          label: "满减价格",
        },
        {
          value: 5,
          label: "限时购",
        },
      ],
    };
  },
  components: {
    Tinymce,
    buttomBanner,
  },
  computed: {
    // 上传图片携带token信息
    fileToken() {
      return getToken();
    },
  },
  methods: {
    // 提交
    doCommit() {
      this.skuList.forEach((el) => {
        el.spData = JSON.stringify(el.spData);
      });
      var productAndSkusVo = {
        pmsSkuStockList: this.skuList,
        product: this.formList,
      };
      updateProductAndSkus(productAndSkusVo).then((res) => {
        if (res.success) {
          this.$message.success("信息添加成功");
          this.$router.go(-1);
        } else {
          this.$message.error(res.message);
          this.$message.error("请检查信息是否完整");
        }
      });
    },
    // 删除sku表格当前行
    delTableSku(index) {
      this.$confirm("此操作将删除当前行, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          if (res == "confirm") {
            this.skuList.splice(index, 1);
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //   返回上一页
    backBefore() {
      this.active--;
    },
    // 下一页,移动端详情
    nextStepDetail() {
      this.active = 3;
    },
    // upload点击传当前index
    pic(index) {
      this.index = index;
    },
    // sku列表中的img
    tableListImg(v) {
      if (v.success) {
        this.$refs.tableListImg.clearFiles();
        this.$set(this.skuList[this.index], "pic", v.data.fileUrl);
      }
    },
    // 生成新的sku列表
    newSkuList() {
      this.$confirm(
        "此操作将清空sku列表,并生成新的sku列表, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((res) => {
          if (res == "confirm") {
            this.skuFun(2);
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 封装是清空sku还是增加sku
    skuFun(number) {
      var color = this.color;
      var sizi = this.sizi;
      var a = color.length >= sizi.length?color:sizi
      var b = color.length < sizi.length?color:sizi
      if (number == 1) {
        var spData = []
        for (var i = 0; i < a.length; i++) {
          for (var j = 0; j < b.length; j++) {
            if(a.length == color.length){
              if(!sizi[j]){
                sizi[j] = {
                  key:"",
                  value:""
                }
              }
              spData.push(color[i], sizi[j]);
            }else{
              if(!color[j]){
                color[j] = {
                  key:"",
                  value:""
                }
              }
              spData.push(color[j],sizi[i]);
            }
            this.skuList.push({ spData });
          }
        }
      } else {
        this.skuList = [];
        for (var i = 0; i < a.length; i++) {
          for (var j = 0; j < b.length; j++) {
            var spData = [];
            if(a.length == color.length){
              if(!sizi[j]){
                sizi[j] = {
                  key:"",
                  value:""
                }
              }
              spData.push(color[i], sizi[j]);
            }else{
              if(!color[j]){
                color[j] = {
                  key:"",
                  value:""
                }
              }
              spData.push(color[j],sizi[i]);
            }
            this.skuList.push({ spData });
          }
        }
      }
      this.color = [];
      this.sizi = [];
    },
    // 在原sku列表上新增
    addSkuList() {
      this.skuFun(1);
    },
    // 删除color数组中某项
    delColorItem(index) {
      this.color.splice(index, 1);
    },
    // 删除sizi数组中某项
    delSiziItem(index) {
      this.sizi.splice(index, 1);
    },
    // 创建sizi项
    addSizi() {
      var item = {
        key: "大小",
        value: this.siziItem,
      };
      this.sizi.push(item);
      this.siziItem = "";
    },
    //   创建color项
    addColor() {
      var item = {
        key: "颜色",
        value: this.colorItem,
      };
      this.color.push(item);
      this.colorItem = "";
    },
    // 上传画图册图片
    upAlbumPicSuccess(v) {
      if (v.success) {
        // this.$forceUpdate();
        this.$refs.albumPics.clearFiles();
        this.formList.albumPics = v.data.fileUrl;
      }
    },
    // 填写下一步信息
    nextStepMes() {
      this.active = 2;
    },
    // 上传图片
    upPicSuccess(v) {
      if (v.success) {
        // this.$forceUpdate();
        this.$refs.bigPic.clearFiles();
        this.formList.pic = v.data.fileUrl;
      }
    },
    init() {
      if (this.id) {
        productSkusDetail(this.id).then((res) => {
          if (res.success) {
            this.formList = res.data.product;
            this.arr = this.formList.serviceIds.split(",");
            res.data.skus.forEach((el) => {
              el.spData = JSON.parse(el.spData);
            });
            this.skuList = res.data.skus;
            console.log(this.skuList);
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    // 获取搜索列表品牌下拉框内容
    initSearchList() {
      var obj = {};
      var arr = [];
      findAllBrand().then((res) => {
        if (res.success) {
          res.data.items.forEach((el) => {
            obj.value = el.id;
            obj.label = el.name;
            arr.push(obj);
            obj = {};
          });
          this.selectBrandList = arr;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.id = window.localStorage.getItem("productId");
    this.init();
    this.initSearchList();
  },
};
</script>

<style lang="scss" scoped>
.margin-top {
  margin-top: 20px;
}
h3 {
  padding: 20px 0;
  border-bottom: 1px solid #e3e3e3;
}
.img {
  width: 150px;
  height: 150px;
}
.spanSku {
  display: inline-block;
}
.img-sku {
  width: 100px;
  height: auto;
}
.color,
.sizi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-upload {
  width: 100%;
  height: 100%;
}
.detail {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  span {
    width: 130px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }
  .tinymce-container {
    width: 100% !important;
  }
}
</style>